<template>
  <!-- 父传子 -->
  <div>
    <!-- 子组件后期传来的index，是为了找到索引，因此在父组件给他动态绑定传过来的，
     -->
    <Son
      v-for="(item, ind) in list"
      :key="item.id"
      :title="item.proname"
      :price="item.proprice"
      :intro="item.info"
      :index="ind"
      @subPrice="theSubFn"
    />
  </div>
</template>

<script>
// 需求：子组件砍一刀价格price
// 目标：子向父传值
// 注意:子组件来源于父组件，父组件重新熏染，数据会被覆盖
// 术语：单项数据流（父->子传值）
// vue固定props里的变量，本身是只读的

// 口诀：
// 1.子组件，this.$emit(‘自定义事件名',要传送的值)
// 2.父组件内，给组件标签绑定自定义事件和方法
import Son from '@/练习/组件/compoents/son'
export default {
  data () {
    return {
      list: [
        { id: 1, proname: "超级好吃的棒棒糖", proprice: 18.8, info: '开业大酬宾, 全场8折' },
        { id: 2, proname: "超级好吃的大鸡腿", proprice: 34.2, info: '好吃不腻, 快来买啊' },
        { id: 3, proname: "超级无敌的冰激凌", proprice: 14.2, info: '炎热的夏天, 来个冰激凌了' },
      ],
    }

  },
  components: {
    Son
  },
  methods: {
    // （两个参数子组件传递值）
    theSubFn (index, subPrice) {
      // 判断如果大于1的时候就执行以下。
      // 父组件砍间隔-数据改变-影响子组件
      if (this.list[index].proprice > 1) {
        this.list[index].proprice =
          this.list[index].proprice - subPrice
      }

    }
  }
}
</script>

<style scoped>
</style>